<template>
    <div class="releaseCon contain">
        <header class="boxShadow header">
            <!-- <label>发布管理</label> -->
            <Breadcrumb>
                <BreadcrumbItem to="/">
                    <Icon type="ios-pricetags" color='#2d8cf0' size="15"></Icon>
                    发布管理
                </BreadcrumbItem>
            </Breadcrumb>
            <Row type="flex" justify="space-between">
                <Col span="10">
                     <Menu mode="horizontal" theme="light" active-name="all" @on-select="changeStatus">
                        <MenuItem name="all">全部</MenuItem>
                        <MenuItem name="deleted">已删除</MenuItem>
                        <MenuItem name="onView">展示中</MenuItem>
                    </Menu> 
                </Col>
                <Col span="8"offset="4">
                    <ul class="tags">
                        <li v-for="(item,index) in tags" :key="item.title">
                            <div>
                                <h4>{{item.title}}</h4>
                                <div>{{item.num}}</div>
                            </div>
                            <Divider type='vertical' v-if="index!==tags.length-1"></Divider>
                        </li>
                    </ul>    
                </Col>
                <Col span="2" >
                    <Button type="primary" icon="android-arrow-dropdown" v-if="!isFilter" @click.native="isFilter=!isFilter;" >筛选</Button>
                    <Button type="primary" icon="android-arrow-dropup" v-else @click.native="isFilter=!isFilter;" >收起</Button>
                </Col>
            </Row>
        </header>
        <section>
            <header class="outboxstyle" v-if="isFilter">
                <div class="belongs">
                    <label>所属类目 ：</label>
                    <Button :type="checkAll?'primary':'ghost'" @click.native="handlecheckAll($event)">全部</Button>
                    <Button class="checkitems"
                        v-for="(item,index) in belongItems"
                        :key="item.id" :name="item.name"
                        @click.native="isChecked($event,item.id,index)" >{{item.name}}</Button>
                </div>
                <Divider dashed></Divider>
                <Row type="flex" justify="start" >
                    <Col :span="10">
                        发布时间 ：
                        <DatePicker type="datetimerange" format="yyyy-MM-dd HH:mm"  @on-change="selectDate" :value="searchTime" placeholder="请选择日期" style="width: 300px" ></DatePicker>
                    </Col>
                    <Col>
                        学校 ：
                       <Select v-model="searchSchool" style="width:200px" placeholder="请选择学校" clearable  filterable>
                            <!-- <OptionGroup v-for="(item,index) in school" :label="item.area" :key="item.area"> -->
                                <Option v-for="item1 in schoolList" :value="item1.id" :key="item1.id">{{ item1.campus }}</Option>
                            <!-- </OptionGroup> -->
                        </Select>
                        <Button type="primary" @click="searchSubmit">查询</Button>
                        <Button @click="searchReset" style="margin-left: 8px">重置</Button>
                    </Col>
                </Row>
            </header>
            <!-- <Scroll :on-reach-bottom="handleReachBottom" class="outboxstyle"> -->
            <div class="outboxstyle">    
                <ul class="releaseList" v-if="isHasData">
                    <li v-for="(item,index) in releaseList" :key="item.id">
                        <div>
                            <h2>{{item.name}}<span>{{item.id}}</span></h2>   
                            <span class="orange">￥{{item.retailPrice}}/{{item.goodsUnit}}</span>
                            <span>共{{item.goodsNumber}}{{item.goodsUnit}}</span>
                            <Tag color="blue">{{item.categoryName}}</Tag>
                            <Tag :color="item.isDelete===0?'green':'yellow'">{{item.isDelete===0?'展示中':'已删除'}}</Tag>
                        </div>
                        <p>{{item.goodsBrief}}</p>
                        <Row :gutter="26" >
                            <Col class="imgWrap " span="5" v-for="(itemImg,imgIndex) in imgs[index]" >
                                <img @click="handleView(itemImg)" v-if="itemImg" class="persent100 imgboxShadow"  :src="itemImg" alt="">
                            </Col>
                        </Row>
                        <p>
                            <Avatar :src="item.avatar" />
                            <span>{{item.name}} {{item.phone}}</span>
                            <span class="pd_left30">{{item.addTime | formatDate}}</span>
                        </p>
                        <Row type="flex" justify="space-between">
                            <Col span="12">
                                <Icon type="android-star-outline" size="16"></Icon>
                                <span>{{item.collect}}</span>

                                <Icon type="thumbsup" size="16" class="pd_left30"></Icon>
                                <span>{{item.fabulous}}</span>
                            </Col>
                            </Col span="4">
                                <Button :disabled="item.isDelete===0?false:true" :type="item.isDelete===0?'error':'default'" @click="releaseListDelete(item.id)" size="large">删 除</Button>
                            </Col>
                        </Row>
                        <Divider></Divider>
                    </li>
                </ul>
                <Exception  v-else pageType="noData" link="/" :isShowBtn="false" style="min-height: 400px; height: 80%;"></Exception>
                <Modal title="Image" v-model="visible">
                    <img :src="imgUrl" v-if="visible" style="width: 100%;">
                </Modal>
            </div>    
            <!-- </Scroll> -->
            <Page v-if="isHasData"  class="pageRight"  show-elevator show-sizer show-total
                    :page-size-opts="[10,30,50,100]"
                    :total="totalCount" 
                    :current="totalPage<currentPage?1:currentPage"
                    @on-change="changePage"
                    @on-page-size-change="changePageSize">
            </Page>
            <Masklayer type="flower" :loaddingMask="loaddingMask"></Masklayer>
        </section>
    </div>
</template>

<script>
    import {Api, baseUrl} from '../../libs/Api'
    import {GlobalFooter,Divider,Masklayer,Exception} from '@/components'
    import {formatDate} from '../../libs/date.js'
    export default{
        components:{GlobalFooter,Divider,Masklayer,Exception},
        data () {
            return{
                tags:[
                    {title:'发布数量', num:''},
                    {title:'分享次数', num:'5423'},
                    {title:'收藏数量', num:'77223'}
                ],
                isFilter:false,
                is_delete:'',
                belongItems:[],
                // belongItems:['全部','书籍','生活用品','体育器材','小型电器','交通工具','电子数码','房屋转租','其他'],
                checkAll:true,
                isCheckeditem:false,
                indeterminate: false,
                checkAllGroupAll:[],
                checkAllGroupItems:[],
                searchTime:'',
                searchSchool:'',//选择的学校
                schoolList:[],
                imgUrl:'',
                imgItem:'',
                visible: false,
                isHasData:true,
                releaseList:[
                    // {title:'江苏大学D楼 204室',price:'50',belong:'生活用品',detail:'如果你无法简洁的表达你的想法，那只能说你不够了解他',imgs:[],avatar:'https://i.loli.net/2017/08/21/599a521472424.jpg',name:'Jane',phone:'13170356789',time:'2017-07-10 18:00',collect:'156',fabulous:'345'},
                ],
                imgs:[],
                totalCount:100,
                totalPage:10,
                currentPage:1,
                pageSize:10,
                loaddingMask:false,
            }
        },
        watch:{
            checkAll:function(newVal,oldVal){//监听是否全选
                if(newVal===true&&newVal!==oldVal){
                    this.releaseRefresh()
                }
            },
            checkAllGroupItems:function(e){//监听选中类目的数组的变化
                if(e.length>0){
                    this.checkAll=false//其他
                }else{
                    this.checkAll=true//全部
                }
            },
        },
        filters: {
            formatDate(time) {
                let date = new Date(time);
                return formatDate(date, 'yyyy-MM-dd hh:mm');
            }
        },
        mounted () {
            //加载类目
            Api.belongs(1,50,'','').then(res =>{
                if(res.data.code=='0'){
                     this.belongItems=res.data.node
                     for(let i=0;i<this.belongItems.length;i++){
                        this.checkAllGroupAll.push(this.belongItems[i].id)
                     }
                     this.releaseRefresh()//初始化发布列表
                }
            })
            //加载学校列表
            Api.schoolList(1,10,'','').then(res =>{
                this.schoolList=res.data.page.list
            })
            //初始化发布数量
            Api.releaseTotal().then(res =>{
                this.tags[0].num=res.data.goodsSum
            })
        },
        methods:{
            //发布列表刷新
            releaseRefresh(){
                let addtime1=Math.round(new Date(this.searchTime[0]).getTime()/1000).toString();
                let addtime2=Math.round(new Date(this.searchTime[1]).getTime()/1000).toString();
                let param={
                        page:this.totalPage<this.currentPage?1:this.currentPage,
                        limit:this.pageSize,
                        sidx:'',
                        order:'',
                        isDelete:this.is_delete,
                        addtime1:this.searchTime==''||this.searchTime[0]==''?'':addtime1,
                        addtime2:this.searchTime==''||this.searchTime[0]==''?'':addtime2,
                        goods_unit:this.searchSchool,
                    }
                    if(this.checkAllGroupItems.length>0){
                        param['category_ids']=this.checkAllGroupItems.join()
                    }else{
                        param['category_ids']=this.checkAllGroupAll.join()
                    }
                this.loaddingMask=true;
                Api.releaseList(param).then(res => {
                    if(res.data.code=='0'){
                        this.totalCount=res.data.page.totalCount;
                        this.totalPage=res.data.page.totalPage
                        this.releaseList=res.data.page.list;
                        this.imgs=[];
                        this.isHasData=this.releaseList.length==0?false:true;
                        for (let i=0;i<this.releaseList.length;i++){
                            this.imgItem=this.releaseList[i].listPicUrl.split(',')
                            this.imgs.push(this.imgItem)
                        }
                        setTimeout(res=>{ this.loaddingMask=false;},300)
                    }else{
                        setTimeout(res1 =>{
                            this.loaddingMask=false,
                            this.$Message.info({
                                duration:1,
                                top:100,
                                content:res.data.msg
                            })
                        },300); 
                    }
                })
            },
            //发布列表删除
            releaseListDelete(releaseId){
                Api.releaseDelete(releaseId).then(res =>{
                    if(res.data.code=='0'){
                        this.releaseRefresh();
                    }
                })
            },
            //选择全部，已删除，展示中
            changeStatus(name){
                this.is_delete = name=='all'?'':name=='deleted'?1:name=='onView'?0:'';
                this.releaseRefresh();
            },
            //所属类目选择全部
            handlecheckAll(){
                let btn=document.getElementsByClassName('checkitems');
                this.checkAll=true;
                this.checkAllGroupItems=[];
                for(let i=0;i<btn.length;i++){
                    btn[i].classList.remove('ivu-btn-primary')
                }
                this.releaseRefresh()
            },
            //所属类目每一项是否选中
            isChecked(e,id,index){
               let btn=document.getElementsByClassName('checkitems')[index];
               if(btn.className.indexOf('ivu-btn-primary')==-1){//当前点击的时候是未选中状态，点击之后变为选中状态，即是选中操作
                   btn.classList.add('ivu-btn-primary');
                   this.checkAllGroupItems.push(id);
               }else{//如果不等于-1，说明点击时是选中状态，点击之后取消选中，所以要删掉之前选中的类目id
                   btn.classList.remove('ivu-btn-primary');
                   this.checkAllGroupItems.splice(this.checkAllGroupItems.findIndex(item => item === id),1)
               }
                this.checkAllGroupItems=Array.from(new Set(this.checkAllGroupItems))
                this.releaseRefresh();
            },
            //选择日期
            selectDate(date){
                this.searchTime=date;
            },
            //搜索提交
            searchSubmit(){
               this.releaseRefresh();
            },
            //搜索重置
            searchReset(){
                this.searchTime='';
                this.searchSchool='';
                this.releaseRefresh();
            },
            //改变页数
            changePage(page){
                this.currentPage=page;
                this.releaseRefresh();
            },
            //改变每页条数
            changePageSize(pageSize){
                 this.pageSize=pageSize;
                 this.releaseRefresh();
            },
            // 滑动刷新
            handleReachBottom () {
                return new Promise(resolve => {
                    setTimeout(() => {
                        // const last = this.list1[this.list1.length - 1];
                        // for (let i = 1; i < 11; i++) {
                        //     this.list1.push(last + i);
                        // }
                        resolve();
                    }, 2000);
                });
            },
            //放大图片
            handleView (name) {
                this.imgUrl = name;
                this.visible = true;
            },
        }
    }
</script>

<style lang="less">
    @import '../../assets/style/_settings.less';
    @import '../../assets/style/normalize.less';
    .releaseCon{
        >header{
            position: relative;
            .ivu-menu-horizontal.ivu-menu-light:after{height:0;}
            .ivu-menu-horizontal .ivu-menu-item{padding:0 40px;}
            .ivu-menu-horizontal{height:50px;line-height:50px;}
            .ivu-breadcrumb{margin-bottom:0;}
            .ivu-row-flex{ height:50px;}
            .ivu-btn{ 
                padding: 4px 15px;
                min-width:70.1px;
            }
        }
        .ivu-menu{z-index:2;}
        .tags{
            overflow: hidden;
            margin-top:-15px;
            li{
                float:left;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content:flex-end;
                list-style-type: none;
                h4{color:@gray;font-weight: normal;}
                >div div{
                    font-size: 2.8*@font;
                    text-align: center;
                }
                .divider,.divider-vertical{
                    height:2.8em;
                    top: -0.4em;
                    margin: 0 20px;
                }
            }
        }
        >section{
            padding-bottom: 8px;
            header{
                background-color:@white; 
                label{font-size:1.5*@font;}
                .divider-horizontal{margin: 12px 0;}
                .ivu-select{margin-right: 10px;}
                .ivu-btn{
                    padding: 4px 15px;
                    min-width:70.1px;
                    margin-right:10px;
                }
            }
            .releaseList{
                min-height: 370px;
                background:@white;
                padding:20px 15px;
                border-radius: 5px;
                .ivu-tag{cursor: inherit}
                li {
                    div:nth-child(1){
                        h2{display: inline-block}
                    }
                    .imgWrap{
                        text-align: center;
                    }
                    p{margin: 5px 0;}
                    img{border:6px solid #fff;width:100%;height:auto;max-height: 200px;}
                    img:hover{cursor: pointer;border:0px solid #fff;}
                    .divider-horizontal{margin:12px 0;}
                    .ivu-btn{margin-top: -15px;width:80px;}
                }
            }
        }
    }
</style>

